<template>
  <div class="xzq">
    <div class="xzq_left">
      <van-field
          v-model="date_value"
          is-link
          readonly
          placeholder="选择日期"
          @click="showPicker3 = true; setCurrentDate()"
      />
      <van-popup v-model:show="showPicker3" destroy-on-close round position="bottom">
        <van-date-picker
            v-model="currentDate"
            title="选择日期"
            :min-date="minDate"
            :max-date="maxDate"
        />
      </van-popup>
    </div>
    <div class="xzq_right">
      <van-field
          v-model="time_value"
          is-link
          readonly
          placeholder="选择时间"
          @click="showPicker4 = true; setCurrentTime()"
      />
      <van-popup v-model:show="showPicker4" destroy-on-close round position="bottom">
        <van-time-picker
            v-model="currentTime"
            title="选择时间"
            :formatter="formatter"
        />
      </van-popup>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 当前日期
const currentDate = ref(['2025', '04', '05']);
const minDate = new Date(2020, 0, 1);
const maxDate = new Date(2099, 12, 31);
const date_value = ref('');
const showPicker3 = ref(false);

// 当前时间
const time_value = ref('');
const showPicker4 = ref(false);
const currentTime = ref(['12', '00']);
const formatter = (type, option) => {
  if (type === 'hour') {
    option.text += '时';
  }
  if (type === 'minute') {
    option.text += '分';
  }
  return option;
};

// 设置当前日期
const setCurrentDate = () => {
  const now = new Date();
  currentDate.value = [
    String(now.getFullYear()),
    String(now.getMonth() + 1).padStart(2, '0'),
    String(now.getDate()).padStart(2, '0')
  ];
};

// 设置当前时间
const setCurrentTime = () => {
  const now = new Date();
  currentTime.value = [
    String(now.getHours()).padStart(2, '0'),
    String(now.getMinutes()).padStart(2, '0')
  ];
};
</script>

<style scoped>
.xzq {
  width: 100%;
  overflow: hidden;
}
.xzq_left {
  width: 47%;
  float: left;
}
.xzq_right {
  width: 47%;
  float: right;
}
</style>